<script setup>
	const onKeydownClick = () => {
		console.log('onKeydownClick');
	};

  const onBtnClick = () => {
    console.log('onBtnClick');
  }

  const onDivClick = () => {
    console.log('onDivClick');
  }
  const onAClick = () => {
    console.log('onAClick');
  }
</script>

<template>
	<!-- 按键修饰符 keydown.[enter|esc...] -->
	<!-- <div>
		<input type="text" @keydown.enter="onKeydownClick" />
	</div> -->

	<!-- 事件修饰符 -->
	<div @click="onDivClick">
    <!-- 阻止默认事件 prevent -->
		<a href="http://www.baidu.com" @click.prevent="onAClick">百度一下(阻止默认事件)</a>
    <!-- 阻止冒泡 stop -->
    <button @click.stop="onBtnClick">
      阻止冒泡
    </button>
    <!-- 既要阻止冒泡 又要阻止默认事件 那么就采用链式 -->
    <a href="http://www.baidu.com" @click.prevent.stop="onAClick">百度一下(既要阻止冒泡 又要阻止默认事件)</a>

	</div>
</template>

<style scoped>
  div {
    width: 400px;
    height: 400px;
    background-color: #6cdc34;
  }
  a {
    display: block;
    width: 200px;
    height: 40px;
    background-color: #267adb;
    color: red;
  }
</style>

